<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Enhanced SVG Heart Animation</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000; /* 黑色背景，衬托发光爱心 */
    }

    /* 中央“I LOVE U”文字 */
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #add8e6; /* 浅蓝色 */
      font-size: 5em;
      font-family: "Arial", sans-serif;
      text-align: center;
      animation: scaleText 2s infinite alternate ease-in-out; /* 文字缩放 */
    }

    @keyframes scaleText {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        transform: translate(-50%, -50%) scale(1.2);
      }
    }

    /* 爱心容器，用于定位 */
    .heart {
      position: absolute;
      animation: flicker 1s infinite alternate;
    }

    /* 让SVG自适应容器大小 */
    .heart svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* 闪烁动画，改变整体不透明度 */
    @keyframes flicker {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0.6;
      }
    }
  </style>
</head>
<body>
  <!-- 文本 -->
  <div class="text">I LOVE U</div>

  <script>
    // 随机创建一个包含SVG爱心的容器
    function createHeart() {
      const heartWrapper = document.createElement('div');
      heartWrapper.classList.add('heart');

      // 设置随机大小
      const size = Math.random() * 10 + 10; // 10 ~ 20 px
      heartWrapper.style.width = size + 'px';
      heartWrapper.style.height = size + 'px';

      // 设置随机位置
      heartWrapper.style.left = Math.random() * 100 + 'vw';
      heartWrapper.style.top = Math.random() * 100 + 'vh';

      // 在容器内嵌 SVG，使用滤镜来模拟爱心形状的光晕
      heartWrapper.innerHTML = `
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
          <defs>
            <!-- 通过形态学膨胀+高斯模糊+颜色控制来产生爱心形状的光晕 -->
            <filter id="heartGlow" x="-50%" y="-50%" width="200%" height="200%">
              <!-- 把 Alpha 通道向外扩张，制造更大的区域 -->
              <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="expanded" />
              <!-- 对扩张后的区域进行模糊，形成柔和光圈 -->
              <feGaussianBlur in="expanded" stdDeviation="3" result="blurred" />
              <!-- 保持颜色不变，这里也可以加入 colorMatrix 做更多变换 -->
              <feColorMatrix in="blurred" type="matrix"
                values="1 0 0 0 0
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 1 0"
                result="colored" />
              <!-- 合并光晕与原始图形 -->
              <feMerge>
                <feMergeNode in="colored" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>
          <!-- 心形路径 -->
          <path
            d="M12 4.248c-3.148-5.402-11.152-1.69-11.152 5.676 0 6.126 9.482 11.733 11.152 12.852 1.67-1.119 11.152-6.726 11.152-12.852 0-7.365-8.004-11.075-11.152-5.676z"
            fill="#ff69b4"
            filter="url(#heartGlow)"
          ></path>
        </svg>
      `;

      document.body.appendChild(heartWrapper);

      // 3秒后移除该爱心
      setTimeout(() => {
        heartWrapper.remove();
      }, 3000);
    }

    // 每200毫秒创建一个心形
    setInterval(createHeart, 200);
  </script>
</body>
</html>